<template>
    <!-- 具备一个宽高的DOM容器 -->
    <div ref="main" :class="classname" :style="{height:height,width:width}"></div>
</template>
<script>
//引入图表组件
import echarts from "echarts"
import { dispose } from 'echarts/lib/echarts'
//引入主题
require('echarts/theme/macarons') 
//引用自适应窗口个大小
import resize from './mixins/resize'
export default {
    //自适应窗口大小改变图标大小
    mixins:[resize],
    props:{
        classname:{
            type:String,
            default:"chart"
        },
        width:{
            type:String,
            default:'100%'
        },
        height:{
            type:String,
            default:"400px"
        },
        legendData:{ //左侧组件接受的数据
            type:Array,
            default:()=>["前端","Java","大数据","移动端"]
        },
        seriesData:{//饼状图中分配的数据
            type:Array,
            default:()=>[
                {value:100,name:"前端"},
                {value:200,name:"Java"},
                {value:300,name:"大数据"},
                {value:500,name:"移动端"},
            ]
        }
    },
    data(){
        return {
            chart:null
        }
    },
    mounted(){
        //当加载DOM后，会调用this.initChart()来进行初始化echart实例
        this.$nextTick(()=>{
            this.initChart()
        })        
    },
    //当组件销毁之前会调用此钩子
    beforeDestroy(){
        if(!this.chart){
            return 
        }
        //注销实例
        this.chart = dispose()
        this.chart = null
    },
    methods:{
        //关于图表的
        initChart(){
           this.chart = echarts.init(this.$refs.main,"macarons")
           //图标配置项
        this.chart.setOption({
            title : {
                text: '各技术频道文章统计',
                // subtext: '文章统计',
                x:'center' //居中
            },
            tooltip : { //鼠标放上去的提示框格式
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {//左上角
                orient : 'vertical',
                x : 'left',
                data:this.legendData
            },
            toolbox: { 
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true, 
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [//序列，展示的具体数据
                {
                    name:'访问来源',
                    type:'pie', //饼状图
                    radius : '55%', //图表的大小
                    center: ['50%', '50%'], //图表的位置['左边',"上下"]
                    data:this.seriesData, //数据
                    emphasis:{
                        itemStyle:{
                          shadowBlur:10, //图形阴影模糊大小
                          shadowOffsetX:0, //图形阴影水平方向偏移距离
                          shadowColor:'rgba(0,0,0,0.5)' //阴影角色
                        }
                    }
                }
            ]
        })
    }
}
}
</script>